<template>
<div class="article-crud v-flex-layout">
  <div class="article-crud__edit is-auto">
    <article-edit @on-articleConfirm="confirmClickHandle" ref="articleEdit"></article-edit>
  </div>
  <div class="article-crud__list is-flex" >
    <div class="inner">
      <div class="result-warp">
        <div class="tags-warp">
          <calc-tags ref="calcTags" @on-tagClick="filterByTag" :fetch-fn="groupArticleByTag"></calc-tags> 
        </div>
        <div class="articles-warp"> 
          <div class="list-warp"> 
            <my-list class="article-list" ref="articleList" :page-size="pageSize" :loader="arcticleLoader" :scroll-distance="10" mode="scroll" fit>
              <template v-slot="scope"> 
                <div style="height: 210px;"> 
                  <article-item :data="scope.item"></article-item>
                </div> 
              </template>  
            </my-list> 
          </div>
        </div>
      </div> 
    </div>
  </div>
</div>
</template>
<style lang="scss" scoped>
@import "~$ui/styles/mixins/_index.scss";
.article-crud{
  height: 100%;
  &__edit{
    padding-bottom: 10px; 
  }
  &__list{
    .result-warp{
      display:flex;
      height: 100%;
      flex-flow: row nowrap;
      .tags-warp{
        flex: 0 0 15%;
        min-width: 150px;
        height: 100%;
        margin-right: 10px
      }
      .articles-warp{
        flex: 1;
        height: 100%;
        position: relative;
        .list-warp{
          box-sizing: border-box;
          position:absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }  
      }

    } 
  }
}
</style>
<script>
import ArticleEdit from '@/components/article/article-edit'
import ArticleItem from '@/components/article/article-item'
import CalcTags from '@/components/article/calc-tags'
import article from '$my/code/mixin/article' 
  
export default {
  mixins: [article],
  components: {
    ArticleEdit,
    ArticleItem,
    CalcTags
  },
  props: {
  },
  data() {
    return { 
      title: '',
      content: '',
      tags: [],
      attachments: [],

      articleList: [],
      articleTotal: 0, 
      page: 1,
      pageSize: 5,
      query: {},
      filterTag: null 
    }
  },
  computed: {
  },
  methods: {
    filterByTag(tag) {
      this.filterTag = tag
      this.$refs.articleList.refresh(1)
    },
   
    delAttachClick(attach) { 
      const targetIndex = this.attachments.findIndex((item) => {
        return item === attach
      })
      this.attachments.splice(targetIndex, 1)
    },
    confirmClickHandle(article) {
      this.addArticle({data: article}).then((res) => {
        this.filterTag = null
        this.$refs.articleList.refresh(1)
        this.$refs.articleEdit.resetForm()
        this.$refs.calcTags.getGroupCount()
      })

    }, 
    arcticleLoader(page, pageSize) {
      this.page = page
      this.pageSize = pageSize
      return this.fetchArticle({
        data: {
          page: this.page,
          pageSize: this.pageSize,
          ...this.query,
          tag: this.filterTag ? this.filterTag.id : '' 
        }
      }).then((res) => {
        console.log('article', res)
        this.articleList = res.list
        this.articleTotal = res.total
        return Promise.resolve({
          total: this.articleTotal,
          list: this.articleList
        })
      })
    } 
  },
  created() {
  },
  mounted() { 
  }
}
</script>
